<!--
 * @Description: 内容容器
 * @Author: huacong
 * @Date: 2020-05-21 13:26:04
 * @LastEditTime: 2020-12-02 18:02:48
 * @LastEditors: huacong
-->
<template lang="pug">
  el-scrollbar(
    :native="false"
    class="mainWrapper"
    :style="{height: mainHeight}"
    :wrap-class="['main__wrap', isIE]"
    view-class="main__view"
    :noresize="false"
  )
    .main_content#main_content(:class="{isDp: isDp}")
      //- transition(name="el-fade-in-linear")
      route-view(:key="routeKey")
</template>
<script>
import RouteView from './RouteView'
import { myBrowser } from '@/utils/util'
import { isIE } from '@/utils/is'

export default {
  name: 'ContentView',
  components: {
    RouteView
  },
  data () {
    return {
      mainHeight: '100%',
      isIE: '',
      isDp: '',
      conComponent: ''
    }
  },
  computed: {
    routeKey () {
      return this.$route.name !== undefined ? this.$route.name + new Date() : this.$route + new Date()
    }
  },
  created () {
    if (myBrowser() === 'FF') {
      this.mainHeight = document.documentElement.offsetHeight + 'px'
    }
    this.isDp = this.$route.name.startsWith('holographicData') ? 'isDp' : ''
    this.isIE = isIE() ? 'isIE' : ''
  }
}
</script>
<style lang="less" scoped>
// 主要内容区
.mainWrapper {
  height: 100%;
  background: #f1f2f6;

  .main__wrap {
    overflow-x: hidden;

    &.isIE {
      .main__view {
        display: block;
      }
    }

    .main__view {
      min-height: 100%;
      display: flex;
      flex-direction: column;
      position: relative;

      .main_content {
        margin: 10px 10px 0;
      }
    }
  }
}
</style>
